<template>
	<view class="relevent">
		<view class="layout files">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe64b;</span>
					<view class="topic">
						回款凭证
					</view>
				</view>
			</view>
			<view class="container">
				<view class="file-list">
					<view class="file-item" v-for="(item, index) in fileUrls" :key="index" @click="openFile(item)">
						{{index + 1}}.{{item.split('.').pop()}}
					</view>
				</view>
			</view>
		</view>
		<view class="layout files">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe660;</span>
					<view class="topic">
						附件
					</view>
				</view>
				<view class="right" @click="uploade">
					+上传
				</view>
			</view>
			<view class="container">
				<view class="file-list">
					<empty v-if="resourceEmpty" desc="暂无附件" height="300"></empty>
					<view class="file-item" v-for="(item, index) in resourceList" :key="index" @click="openFile(item.url)">
						{{index + 1}}.{{item.url.split('.').pop()}}
						<view class="close" @click.stop="deleteFile(item.id)">
							<uni-icons type="closeempty" size="16" color="#4095E5"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="layout recode">
			<view class="header">
				<view class="left">
					<span class="iconfont icon">&#xe680;</span>
					<view class="topic">
						操作记录
					</view>
				</view>
			</view>
			<view class="container">
				<empty v-if="operateEmpty" desc="暂无记录" height="300"></empty>
				<view v-else class="recode-container">
					<view class="recode-list" v-for="item in operateList" :key="item.id">
						<view class="item">
							<view class="info">
								<view class="user">
									<view class="circle"></view>
									<view class="avatar">
										<image src="@/static/images/avatar.png" mode="aspectFill"></image>
									</view>
									<view class="name">
										{{item.userName}}
									</view>
								</view>
								<view class="time">
									{{$share.getTime(item.createTime)}}
								</view>
							</view>
							<view class="action">
								{{item.subType}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue"
	export default{
		components:{
			empty
		},
		data(){
			return {
				resourceEmpty: false,
				resourceList: [],
				operateEmpty: false,
				operateList: [],
			}
		},
		props:{
			paymentId: Number,
			fileUrls: Array
		},
		async mounted() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			})
			let resource = await this.$share.getResourceList(this.paymentId, 7);
			this.resourceEmpty = resource.empty;
			this.resourceList = [...resource.resourceList];
			let operate = await this.$share.getOperateList(this.paymentId, 'CRM 回款');
			this.operateEmpty = operate.empty;
			this.operateList = [...operate.list];
		},
		methods:{
			// 上传项目资料
			uploade(){
				wx.chooseMessageFile({
				  count: 1,
				  type: 'file',
				  success: async (res) => {
						let data = await this.$share.uploade(this.paymentId, 7, res.tempFiles[0].path);
						if(data){
							uni.showLoading({
								mask: true,
								title: '加载中...'
							})
							let resource = await this.$share.getResourceList(this.paymentId, 7);
							this.resourceEmpty = resource.empty;
							this.resourceList = [...resource.resourceList];
						}
				  }
				})
			},
			// 预览文件
			openFile(file){
				if(this.$share.isImg(file)){
					let urls = [];
					urls[0] = file
					uni.previewImage({
						urls: urls
					})
				}else{
					this.$share.openFile(file);
				}
			},
			// 删除文件
			async deleteFile(id){
				let data = await this.$share.deleteFile(id);
				if(data){
					uni.showLoading({
						mask: true,
						title: '加载中...'
					})
					let resource = await this.$share.getResourceList(this.paymentId, 7);
					this.resourceEmpty = resource.empty;
					this.resourceList = [...resource.resourceList];
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.relevent{
		padding: 28rpx;
		.layout{
			@include box;
			margin: 0 0 18rpx;
			.header{
				padding: 18rpx 28rpx;
				@include flex-r-between-center;
				border-bottom: 4rpx #f7f7f7 solid;
				.left{
					@include flex-r-start-center;
					.icon{
						color: #101010;
						font-size: 38rpx;
						font-weight: bold;
					}
					.topic{
						padding-left: 8rpx;
						color: #000;
						font-size: 28rpx;
					}
				}
				.right{
					color: #4095E5;
					font-size: 24rpx;
				}
			}
			.container{
				padding: 0 28rpx;
			}
		}
		.payment{
			.container{
				.payment-list{
					padding: 0 0 6rpx;
					.item{
						padding: 16rpx 0;
						border-bottom: 4rpx #d2d2d2 solid;
						&:last-child{
							border-bottom: none;
						}
						.top{
							@include flex-r-between-center;
							padding: 0 0 10rpx;
							.title{
								color: #000;
								font-size: 26rpx;
							}
							.tag{
								min-width: 80rpx;
								height: 36rpx;
								line-height: 36rpx;
								text-align: center;
								color: #3BBF03;
								font-size: 20rpx;
								border-radius: 4rpx;
								border: 2rpx #3BBF03 solid;
							}
						}
						.bottom{
							@include flex-r-wrap;
							.bot-item{
								width: 50%;
								color: #9A9A9A;
								font-size: 24rpx;
								padding: 0 0 10rpx;
							}
							.max{
								width: 100%;
							}
						}
					}
				}
			}
		}
		.files{
			.container{
				.file-list{
						padding: 18rpx 0;
						.file-item{
							height: 52rpx;
							line-height: 52rpx;
							text-align: center;
							border-radius: 6rpx;
							background-color: #F3F6F9;
							color: #101010;
							font-size: 28rpx;
							margin-bottom: 10rpx;
							position: relative;
							.close{
								position: absolute;
								top: 0;
								right: 10rpx;
							}
						}
				}
			}
		}
		.recode{
			.container{
				.recode-container{
					padding: 26rpx 0 0;
					.recode-list{
						&:last-child{
							.item{
								.action{
									border: none;
								}
							}
						}
						.item{
							.info{
								@include flex-r-between-center;
								.user{
									@include flex-r-start-center;
									.circle{
										@include circle(16);
										background-color: #6C6C6C;
										margin-right: 36rpx;
									}
									.avatar{
										@include avatar(56);
									}
									.name{
										font-size: 26rpx;
										color: #000;
										padding-left: 30rpx;
									}
								}
								.time{
									font-size: 26rpx;
									color: #9A9A9A;
								}
							}
							.action{
								min-height: 62rpx;
								color: #000;
								font-size: 26rpx;
								padding-left: 124rpx;
								border-left: 4rpx #6C6C6C solid;
								margin-left: 6rpx;
							}
						}
					}
				}
			}
		}
	}
</style>